//新增地址
<template>
  <div class="">
    <navBar :title="title"></navBar>
    <van-form @submit="onSubmit" class="submit">
      <van-field
        v-model="username"
        name="联系人"
        label="联系人"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="phone"
        type="phone"
        name="手机号"
        label="手机号"
        placeholder="收货人手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
        readonly
        clickable
        name="area"
        :value="value"
        label="所在地区"
        placeholder="请选择省/市/区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"/>
      </van-popup>
      <van-field
        v-model="value1"
        label="详细地址"
        name="pattern"
        placeholder="填写街道详细地址"
        :rules="[{ pattern, message: '请填写街道详细地址' }]"
      />
      <van-field name="switch" label="默认地址" class="default">
        <template #input>
          <van-switch v-model="switchChecked" size="20" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" class="btn">保存</van-button>
      </div>
    </van-form>
  </div>
</template> 

<script>
import navBar from '@/components/navBar';
import { Toast } from 'vant';
export default {
  name: '',
  props: {},
  components: {
    navBar,
  },
  data() {
    return {
      title:'地址新增',
      username: '',
      phone: '',
      value: '',
      showArea: false,
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市',
        },
        city_list: {
          110100: '北京市',
          120100: '天津市',
        },
        county_list: {
          110101: '东城区',
          110102: '西城区',
          // ....
        },
      }, // 数据格式见 Area 组件文档
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/,
      switchChecked: false,
    };
  },
    methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
  }
}
</script>

<style lang='scss' scoped>
  .submit{
    padding-top: 3.5rem;
  }
  .btn{
    background-color: #30ccb5;
    border: none;
    margin-top: 3.27rem;
  }
</style>